<template>
	<view>
		<image v-if="!arrList" class="bg" src="../../static/image/sc.png"></image>
		<view v-if="arrList" class="cu-bar bg-cyan search">
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input type="text" @click="collect" placeholder="搜索" confirm-type="search"></input>
			</view>
		</view>
		<view class="content">
			<block v-for="(item, index) in arrList" :key="index">
				<uni-swipe-action v-if="item.type == 1" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<view class="name">{{item.content}}</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
				<uni-swipe-action v-if="item.type == 3" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont" @tap="showPic(item.image)">
						<view class="name">
							<image class="imgs" :src="urls + item.image"></image>
							{{item.content}}
						</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
				<uni-swipe-action v-if="item.type == 2" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont" @tap="playVoice(item.content)">
						<view class="name">
							<image class="imgs img2" src="../../static/image/yuyintiao_20.png"></image>
							语音：
							<view class="grays">{{item.yuyintime}}</view>
						</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
				<uni-swipe-action v-if="item.type == 4" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<image class="img2s" src="../../static/image/head.png"></image>
						<view class="times">12:12</view>
					</view>
				</uni-swipe-action>
			</block>
			<text class="loading-text">
				{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		components: {
			uniSwipeAction,
			// uniList,
			// uniListItem
		},
		data() {
			return {
				arrList: [],
				isOpened: false,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}],
				page: 1,
				loadingType: '',
				contentText: {
					contentdown: "上滑显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				urls: this.$common.baseUrl,
				//播放语音相关参数
				AUDIO:uni.createInnerAudioContext(),
				playMsgid:null,
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.isOpened = true
			})
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad() {
			this.initDat();
			//语音自然播放结束
			this.AUDIO.onEnded((res)=>{
				this.playMsgid=null;
			});
		},
		methods: {
			initDat() {
				this.$common.requests('/api/collect/collectIndex',{page:1}).then(res => {
					if (res.data.code == 1) {
						let newsList = [];
						if (res.data.data.length > 15) {
							this.loadingType = 0;
							for (var i = 0; i < 15; i++) {
								newsList.push(res.data.data[i]);
							}
							this.arrList = newsList;
						} else {
							this.loadingType = 2;
							this.arrList = res.data.data;
						}
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
					}
				})
			},
			//下拉刷新
			onPullDownRefresh() {
				this.page = 1;
				this.initDat();
			},
			//触底加载
			onReachBottom() {
				this.page++; //每触底一次 page +1
				if (this.loadingType != 0) { //loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading(); //显示加载动画
				this.$common.requests('/api/collect/collectIndex',{page:this.page}).then(res => {
					if (res.data.code == 1) {
						if (res.data.data == null || res.data.data == '') { //没有数据
							this.loadingType = 2;
							uni.hideNavigationBarLoading(); //关闭加载动画
							return;
						}
						this.arrList = this.arrList.concat(res.data.data); //将数据拼接在一起
						this.loadingType = 0; //将loadingType归0重置
						uni.hideNavigationBarLoading(); //关闭加载动画
					}
				})
			},
			bindClick(id) {
				var obj = {
					id: id
				}
				this.$common.requests('/api/collect/collectdel', obj).then(res => {
					if (res.data.code == 1) {
						this.initDat();
					}
				})

			},
			//收藏详情
			collect() {
				uni.navigateTo({
					url: '../collect/collect'
				})
			},
			// 预览图片
			showPic(imgs) {
				var imgArr = [];
				imgArr.push(this.urls+imgs)
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// 播放语音
			playVoice(videos){
				this.AUDIO.src = videos;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '../releaseAnnouncement/releaseAnnouncement'
			})
		}
	}
</script>

<style>
	page {
		background: #F5F4F9;
		border-top: 1px solid #E8E8E8;
	}

	.search {
		background: #F5F4F9;
		height: 110upx;
	}

	.radius {
		background: #FFFFFF !important;
		height: 80upx !important;
		margin-top: 10upx;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.content {
		padding: 0 30upx;
	}

	.uni-swipe_box {
		border-radius: 25upx;
		margin-top: 20upx !important;
	}

	.uni-swipe_button {
		margin-top: 20upx !important;
		border-radius: 25upx;
	}

	.list {
		border-radius: 25upx;
		margin-top: 20upx !important;
	}



	.cont {
		width: 80%;
		margin: 0 30upx;
		padding: 25upx 0;
		position: relative;
		background-color: #fff;
		font-size: 15px;
	}

	.name {
		display: flex;
		justify-content: flex-start;
	}

	.times {
		font-size: 28upx;
		color: #797979;
		padding-top: 10upx;
	}

	.imgs {
		width: 90upx;
		height: 90upx;
		margin-right: 20upx;
	}

	.img2 {
		width: 100upx;
		height: 50upx;
	}

	.grays {
		color: #797979;
	}

	.img2s {
		width: 60upx;
		height: 60upx;
	}

	.loading-text {
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>
